<template>
	<uni-file-picker readonly limit="1" :value="fileLists" return-type="object" :del-icon="false"
	class="preview"	:imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
</template>

<script>
	import config from '@/request/config.js'
	export default {
		name: "imageUpload",
		props: {
			img: String
		},
		data() {
			return {
				imageStyles: {
					width: 50,
					height: 50,
					display: "inline-block"
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			}
		},
		methods: {
			uploadFile(files) {
				let params = {
					url: config.api()+'/file/upload', //仅为示例，非真实的接口地址
					filePath: files.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						let tempUrl = JSON.parse(res.data).data.url
						this.fill(tempUrl)
						
					},
				}
				uni.uploadFile(params)
			},
			upload() {
				let params = {
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: this.uploadFile
				}
				uni.chooseImage(params)
			},
			fill(url){
				this.fileLists = []
				let tempurl = config.api()+'/' + url
				this.fileLists.push({
					url: tempurl
				})
				this.$emit("update:img", url)
			},
			setUrl(url){
				this.fill(url)
			}
		},
		mounted() {
			this.fill(this.img)
		},
	}
</script>

<style scoped>
	.preview{
		display: flex;
	}

</style>